<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { memberRegisterService } from '@/api/common.js'

const router = useRouter()

const registerFormModel = ref({
  username: null,
  name: null,
  mobilePhone: null,
  idNumber: null,
  email: null
})

// 表单校验规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'onBlur' },
    {
      validator: (val) => val.length >= 5 && val.length <= 20,
      message: '用户名必须是5~20位字符',
      trigger: 'onBlur'
    }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'onBlur' }],
  mobilePhone: [
    { required: true, message: '请输入移动电话', trigger: 'onBlur' },
    {
      pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
      message: '请输入正确的移动电话',
      trigger: 'onBlur'
    }
  ],
  idNumber: [
    { required: true, message: '请输入身份证号码', trigger: 'onBlur' },
    {
      pattern:
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '请输入正确的身份证号码',
      trigger: 'onBlur'
    }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'onBlur' },
    {
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: '请输入正确的电子邮箱',
      trigger: 'onBlur'
    }
  ]
}

const handleRegister = async () => {
  await memberRegisterService(registerFormModel.value)
  showDialog({
    title: '注册成功',
    message: '初始密码为123456，请尽快修改'
  }).then(() => {
    router.push('/login')
  })
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<template>
  <div class="register-container">
    <div class="header">
      <img class="logo" src="@/assets/logo.png" />
      <h1>会员注册</h1>
    </div>

    <van-form @submit="handleRegister" class="form">
      <van-cell-group inset>
        <van-field
          v-model="registerFormModel.username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="rules.username"
        />
        <van-field
          v-model="registerFormModel.name"
          name="username"
          label="姓名"
          placeholder="请输入姓名"
          :rules="rules.name"
        />
        <van-field
          v-model="registerFormModel.mobilePhone"
          name="mobilePhone"
          label="移动电话"
          placeholder="请输入移动电话"
          :rules="rules.mobilePhone"
        />
        <van-field
          v-model="registerFormModel.idNumber"
          name="idNumber"
          label="身份证号码"
          placeholder="请输入身份证号码"
          :rules="rules.idNumber"
        />
        <van-field
          v-model="registerFormModel.email"
          name="email"
          label="电子邮箱"
          placeholder="请输入电子邮箱"
          :rules="rules.email"
        />
      </van-cell-group>

      <div class="submit-btn">
        <van-button round block type="primary" native-type="submit">立即注册</van-button>
      </div>
    </van-form>

    <div class="footer">
      <span @click="goToLogin">已有账号？立即登录</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register-container {
  height: 100vh;
  padding: 0 20px;

  .header {
    text-align: center;
    margin-bottom: 60px;

    .logo {
      width: 150px;
      height: 150px;
    }

    h1 {
      font-size: 24px;
      color: #333;
    }
  }

  .form {
    .submit-btn {
      margin: 40px 0;
    }
  }

  .footer {
    text-align: center;
    margin-top: 30px;

    span {
      color: #1989fa;
      font-size: 14px;
    }
  }
}
</style>
